<template>
  <div class="sy-container">
  <section class="sy1 chj_thematic_banner">

      <img src="~/assets/img/chjm_rssb.JPG" alt="">
  </section>
    <section class="rs2">
      <div class="ct">
        <div>
          <h4>精选人事社保服务</h4>
          <p>品质推荐 我们为您省钱</p>
        </div>
        <a :href="title.gj[0].cclink">立即咨询</a>
      </div>
    </section>
    <section class="rs3 sy">
      <h3>{{title.zym.service[0].servicename}}<span>{{title.zym.service[0].remark}}</span><em @click="bar(117,117)">更多</em></h3>
      <ul>
        <li v-for="(data,id) in title.zym.service[0].threeServiceRes.slice(0,4)" @click="xqymtz(data.id,data.pid)">
          <img :src="'https://exam.zhonghaiqihang.com'+data.fouriconimg">
          <div>
            <h4>{{data.servicename}}</h4>
            <p>{{data.remark}}</p>
          </div>
        </li>
      </ul>
    </section>
    <section class="rs3 sy" style="margin-top: .18rem">
      <h3>{{title.zym.service[1].servicename}}<span>{{title.zym.service[1].remark}}</span><em @click="bar(117,117)">更多</em></h3>
      <ul>
        <li v-for="(data,id) in title.zym.service[1].threeServiceRes.slice(0,4)" @click="xqymtz(data.id,data.pid)">
          <img :src="'https://exam.zhonghaiqihang.com'+data.fouriconimg">
          <div>
            <h4>{{data.servicename}}</h4>
            <p>{{data.remark}}</p>
          </div>
        </li>
      </ul>
    </section>
    <section class="rs4">
      <h4>{{title.zym.service[3].threeServiceRes[0].servicename}}</h4>
      <p>{{title.zym.service[3].threeServiceRes[0].remark}}</p>
      <a href="JavaScript:;" @click="bar(137,136)">立即咨询</a>
    </section>

    <section class="rs3 sy" style="margin-top: .18rem">
      <h3>工作居住证<span>企业邦帮您 轻松获取工作居住证</span><em @click="bar(117,117)">更多</em></h3>
      <ul>
        <li v-for="(gs,id) in title.zym.service[2].threeServiceRes.slice(0,4)" :key="id" :class="'li'+(id+1)" @click="xqymtz(gs.id,gs.pid)">
          <img :src="gs.fouriconimg?'https://exam.zhonghaiqihang.com/'+gs.fouriconimg:'~/assets/img/rssc3'+(id+1)+'.png'" >
          <div>
            <h4 style="font-size: 0.22rem;">{{gs.servicename}}</h4>
            <p style="width: auto;padding-right: 0.18rem;">{{gs.remark}}</p>
          </div>
        </li>
      </ul>
    </section>


    <section class="sy sy8">
      <h3>咨询管家<span style="font-size: .19rem">专业管家在线服务，一对一免费咨询</span></h3>
      <div class="two zb">
        <ul class="ct zb">
          <li v-for="(data,id) in title.gj" :key="id" :class="'li'+id" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+data.avatar+') no-repeat 0rem 0/3.4rem 2.69rem',width:'3.2rem',height:'2.69rem'}">
            <div class="top">
              <h4>{{data.username}}</h4>
              <p class="p2">经营资质顾问</p>
              <p class="p3">{{data.mobile}}</p>
            </div>
             <a @click="chj_gj(data,id)"  href="JavaScript:;">立即咨询</a>
          </li>
        </ul>
      </div>
    </section>
    <section class="sy sy9" style="margin-top: .18rem">
      <h3>用心对待<span>一个互联网服务品牌 企业服务智能升级的实践者</span> <em @click="more()">更多</em></h3>
      <ul>
        <li><img src="~/assets/img/m-sy91.png">
          <p>快速响应</p>
        </li>
        <li><img src="~/assets/img/m-sy92.png">
          <p>信息安全</p>
        </li>
        <li><img src="~/assets/img/m-sy93.png">
          <p>进度掌握</p>
        </li>
        <li><img src="~/assets/img/m-sy94.png">
          <p>专属服务</p>
        </li>
        <li><img src="~/assets/img/m-sy95.png">
          <p>提供售后</p>
        </li>
      </ul>

    </section>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';

  // import Logo from '~/components/Logo.vue'
  export default {
    components: {
      // Logo
    },
    data(){
      return{
        datas:null,
        sele1:0,
        swiperOption: {
          loop: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          autoplay:{
            delay:5000,
            disableOnInteraction:false,
            spaceBetween:5000,
            loop:true,
          },
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
          },
          on: {
            slideChange() {
            },
            tap() {
            }
          }
        }


      }
    },
    async asyncData ({ params }) {
    let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'116'
      }});
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {zym:nh2.data,gj:nh3.data};
    return { title: data}
  },
  head() {
    return {
      title: this.title.zym.oneService.title,
      meta: [
        { hid: 'description', name: 'description', content: this.title.zym.oneService.descript },
        { hid: 'keywords', name: 'keywords', content:this.title.zym.oneService.keyword }
      ]
    }
  },
  mounted:function(){
    $('header').show();
    function IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    }
    if(IsPC()){
      this.$router.push('/Personnel');
    }else{

    }

  }
  ,methods:{
    chj_gj:function(e1,e2){
      let href = '/Mobile/visitingCard/'+e1.id
      location.href = href;
    },
    bar:function(e1,e2){
       let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
       location.href = href;
     },
    xqymtz:function(e1,e2){
      let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
      location.href = href;
    },

    more:function(e){
      location.href = '/Mobile/More';
    }
  }

  }
</script>

<style>

</style>
